<template>
  <a class="slide-next-btn" @click="$emit('click')" href="#">
    <span class="slide-next-circle">
      <!-- 灰色完整圆圈底层 -->
      <span class="circle-gray"></span>
      <!-- SVG 黄色弧线 (左上角和右下角) - 完全重合在灰色圆圈上 -->
      <svg class="circle-shape" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="48" 
                fill="none" 
                stroke="#e58707"
                stroke-width="2"
                stroke-dasharray="30 125 30 156"
                stroke-dashoffset="-88"
                transform="rotate(-90 50 50)"/>
      </svg>
      <!-- 中间的内容 (小黄点或箭头) -->
      <span class="slide-next-circle-in">
        <span class="dot"></span>
        <span class="arrow">→</span>
      </span>
    </span>
    <span class="slide-next-text">继续</span>
  </a>
</template>

<script setup lang="ts">
defineEmits<{
  (e: 'click'): void;
}>();
</script>

<style scoped>
.slide-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  color: #909bb0;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-top: 2rem;
  width: 13rem;
}

.slide-next-circle {
  position: relative;
  width: 5.8rem;
  height: 5.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG 黄色弧线 */
.circle-shape {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: all 0.5s ease;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

/* 灰色完整圆圈 */
.circle-gray {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #4a5568;
  border-radius: 50%;
  top: 0;
  left: 0;
  opacity: 1;
  z-index: 1;
  transition: all 0.5s ease;
}

/* 中间的内容容器 */
.slide-next-circle-in {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 小黄点 (初始状态显示) */
.dot {
  width: 0.8rem;
  height: 0.8rem;
  background-color: #e58707;
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  position: absolute;
}

/* 箭头 (初始状态隐藏) */
.arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 2rem;
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
  z-index: 1;
  line-height: 1;
}

.slide-next-text {
  font-size: 2.2rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  transition: all 0.3s ease;
  color: #fff;
}

/* ====== Hover 效果 ====== */

/* hover 时SVG旋转180度 */
.slide-next-btn:hover .circle-shape {
  transform: rotate(180deg);
}

/* hover 时灰色圆圈变成黄色完整圆 */
.slide-next-btn:hover .circle-gray {
  border-color: #e58707;
  border-width: 2px;
  opacity: 1;
}

/* hover 时小黄点扩大成圆形背景 */
.slide-next-btn:hover .dot {
  width: 5.8rem;
  height: 5.8rem;
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 20px rgba(229, 135, 7, 0.3);
}

/* hover 时显示箭头 - 从小到正常大小弹出 */
.slide-next-btn:hover .arrow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 响应式设计 */
@media (max-width: 991px) {
  .slide-next-btn {
    display: none;
  }
}

@media (max-width: 768px) {
  .slide-next-btn {
    gap: 1.5rem;
  }
  
  .slide-next-circle {
    width: 6rem;
    height: 6rem;
  }
  
  .arrow {
    font-size: 1.5rem;
  }
  
  .dot {
    width: 0.6rem;
    height: 0.6rem;
  }
  
  .slide-next-text {
    font-size: 1rem;
  }
}
</style>